<%--
  Created by IntelliJ IDEA.
  User: 10379
  Date: 2020/9/28
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">
    <title>Editable Table</title>

    <!--data table-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css"/>
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">
</head>

<body class="sticky-header" style="background-color:#E4E7EA">

<section>
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        教师管理
                        <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                    </header>
                    <div class="panel-body">
                        <div class="adv-table editable-table ">
                            <div class="clearfix">
                                <div class="btn-group">
                                    <button onclick="addTeacher()" class="btn btn-primary">
                                        新增教师 <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                                <div style="float: right"><input type="text" id="text" placeholder="请输入老师名"/>
                                    <button  class="button" onclick="queryTeacherByAddress()">查询</button>
                                </div>

                            </div>
                            <div class="space15"></div>

                            <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                <thead>
                                <tr>
                                    <th>老师名字</th>
                                    <th>所属学院</th>
                                    <th>联系电话</th>
                                    <th>编辑</th>
                                    <th>删除</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                </tbody>
                            </table>
                            <%--分页区域--%>
                            <center>
                                <div class="margin">
                                    共<span id="sum"></span>条数据,
                                    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                                    <option value="5">5</option>
                                    <option value="10">10</option>
                                    <option value="15">15</option>
                                </select>条数据，当前是第<span id="currentPageSpan"></span>页，
                                    总共<span id="totalPageSpan"></span> 页
                                    <button class="button" onclick="firstPage()">首页</button>
                                    <button class="button" onclick="prePage()">上一页</button>
                                    <button class="button" onclick="nextPage()">下一页</button>
                                    <button class="button" onclick="lastPage()">尾页</button>
                                </div>
                            </center>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!--body wrapper end-->
    <%--
            <!--footer section start-->
            <footer>
                2014 &copy; AdminEx by ThemeBucket
            </footer>--%>
    <!--footer section end-->
    <%--这里做一个编辑用户信息的模态框--%>
    <div class="modal" id="editModal">
        <%--对话模态框--%>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>编辑老师信息</h4>
                </div>
                <div class="modal-body">
                    <label class="control-label">老师名字：</label>
                    <input class="form-control" type="text" id="teacherNameInput" placeholder="请输入老师名字"/>
                    <label class="control-label">所属学院</label>
                    <select class="form-control" id="collegeSelect" placeholder="所属学院">

                    </select>
                    <label class="control-label">联系电话</label>
                    <input class="form-control" type="text" id="telInput" placeholder="请输入老师联系电话"/>
                    <input type="hidden" id="teacherIdInput"/>
                </div>
                <div class="modal-footer">
                    <button class="button" data-dismiss="modal" onclick="quxiao()">取消</button>
                    <button class="button" onclick="editConfirm()">确定</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>
<%--<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>--%>

<!--data table-->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--script for editable table-->
<script src="${pageContext.request.contextPath}/static/js/editable-tablemjx.js"></script>

<!-- END JAVASCRIPTS -->
<script>
    jQuery(document).ready(function () {
        EditableTable.init();
    });

    $(function () {
        loadListByPage();
        choiceTeacher();
    })

    function showList(teacherList) {

        var html = '';
        //遍历subjectList数组
        for (var i = 0; i < teacherList.length; i++) {
            //拿到一个课程信息
            var item = teacherList[i];
            console.log(item);
            html += "<tr>";
            // html+="<td>"+subjectList.subjectId+"</td>";//显示老师的id
            // html += "<td><a onclick='showNews(\""+item.collegeId+"\")'>" + item.name +"</a></td>";//显示老师的名字
            html += "<td><a href=";
            html+="${pageContext.request.contextPath}/subject/showTeachers?teacherId="+item.teacherId;
            html+=">" + item.name +"</a></td>";//显示课程的名字
            html += "<td>" + item.college.name + "</td>";
            html += "<td>" + item.tel + "</td>";
            html += "<td><input type='button' value='编辑' style='width: content-box ; height: auto' onclick='teacherDetail(\"" + item.teacherId + "\")'/></td>";
            html += "<td><input type='button' value='删除' style='width: content-box ; height: auto' onclick='teacherDelete(\"" + item.teacherId + "\")'/></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }

    function addTeacher() {
        //显示用户编辑的模态框
        showEditModal();
    }

    //对单个课程的编辑
    function teacherDetail(teacherId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/teacher/getOneTeacher",
            type: 'get',
            data: {"teacherId": teacherId},//传递课程id
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showEditModal(result.teacher);
                }
            },
            error: function (err) {
                alert(err.message);
            }
        })
    }

    //显示用户编辑界面的模态框
    function showEditModal(teacher) {
        if (teacher != null) {
            $("#teacherIdInput").val(teacher.teacherId);
            $("#teacherNameInput").val(teacher.name);//传递subjectId
            $("#collegeSelect").val(teacher.college.collegeId);//根据sex的值来选中select中的option
            $("#telInput").val(teacher.tel);
            // $("#usernameInput").attr("disabled", "disabled");
        } else {
            clearModal();
        }
        $("#editModal").modal("show");
    }

    //确定修改老师信息
    function editConfirm() {
        var teacherIdValue = $("#teacherIdInput").val();
        var teacherNameValue = $("#teacherNameInput").val();
        var collegeValue = $("#collegeSelect").val();
        var telValue = $("#telInput").val();
        var dataValue = {
            teacherId: teacherIdValue,
            collegeId:collegeValue,
            name: teacherNameValue,
            tel:telValue
        };
        var teacherString = JSON.stringify(dataValue);
        $.ajax({
            url: "${pageContext.request.contextPath}/teacher/editTeacher",
            type: 'post',
            contentType: 'application/json',
            data: teacherString,//传递用户编辑后的信息
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态框
                    loadListByPage();
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    //清空模态框里面的数据
    function clearModal() {
        $("#teacherIdInput").val(0);//传递subjectId
        $("#teacherNameInput").val("");
        $("#collegeSelect").val(0);//
        $("#telInput").val("");
        // $("#usernameInput").removeAttr("disabled");//去掉disabled这个属性
    }

    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 5;
    //总共有多少页
    var totalPage;
    $(function () {
        // loadList();
        loadListByPage();
    })

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        currentPage = 1;
        loadListByPage();
    }

    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }

    //上一页的回调方法
    function prePage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        loadListByPage();
    }

    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        loadListByPage();
    }

    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }

    //分页加载用户列表
    function loadListByPage(teacherName) {
        if(teacherName!=null){
            //刷新页面后都是显示第一页
            $.ajax({
                url: "${pageContext.request.contextPath}/teacher/getListByPageAndTeacherName",
                type: 'get',
                data: {"currentPage": currentPage, "pageSize": pageSize,"teacherName":teacherName},
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0) {
                        showList(result.teacherList);
                        totalPage = result.totalPage;
                        $("#totalPageSpan").html(totalPage);
                        $("#currentPageSpan").html(currentPage);
                        $("#sum").html(result.sum);
                    }
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            })
        }else{
        //刷新页面后都是显示第一页
        $.ajax({
            url: "${pageContext.request.contextPath}/teacher/getTeacherListByPage",
            type: 'get',
            data: {"currentPage": currentPage, "pageSize": pageSize},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.teacherList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                    $("#sum").html(result.sum);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
        }
    }

    function teacherDelete(teacherId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/teacher/deleteOneByTeacher",
            type: 'get',
            contentType: 'application/x-www-form-urlencoded',//指明是个普通的表单提交
            data: {"teacherId": teacherId},//传递老师id
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面上
                    loadListByPage();
                }
                alert(result.message);
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function choiceTeacher() {
        // alert("来到选择学院方法中");
        $.ajax({
            url: "${pageContext.request.contextPath}/teacher/getColleges",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    // showList(result.userList);
                    showTeacherList(result.collegeList)
                    //给下拉框加选择项！！！
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }

        })
    }

    //获取当前学院的老师列表
    function showTeacherList(collegeList) {
        var html = '';
        //遍历teacherList数组
        for (var i = 0; i < collegeList.length; i++) {
            //拿到一个老师信息
            var item = collegeList[i];
            html += "<option value=";
            html += item.collegeId;
            html += ">";
            html += item.name;
            html += "</option>";
        }
        $("#collegeSelect").html(html);
    }
    //根据课程名进行模糊查询
    function queryTeacherByAddress() {
        var teacherName = $("#text").val();
        loadListByPage(teacherName);
    }
    //显示老师详细信息
    function showNews(teacherId) {

    }

</script>

</body>
</html>
